import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import { useTheme } from '@mui/material/styles';
import GitHubIcon from '@mui/icons-material/GitHub';
import SvgIcon from '@mui/material/SvgIcon';
import { UserCardData } from '@/services/front/blogSetting';

// SVG Icons for CSDN, Gitee, Zhihu
const CsdnIcon = (props: any) => (
  <SvgIcon {...props} viewBox="0 0 24 24">
    <path d="M2 12c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12zm15.5-3.5h-11v2h9a2 2 0 110 4h-9v2h11a4 4 0 000-8z" />
  </SvgIcon>
);
const GiteeIcon = (props: any) => (
  <SvgIcon {...props} viewBox="0 0 24 24">
    <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18a8 8 0 100-16 8 8 0 000 16zm4-8a4 4 0 11-8 0 4 4 0 018 0z" />
  </SvgIcon>
);
const ZhihuIcon = (props: any) => (
  <SvgIcon {...props} viewBox="0 0 24 24">
    <path d="M2 12c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12zm15 1h-2v3h-2v-3H7v-2h4V8h2v3h2v2z" />
  </SvgIcon>
);

const UserCard: React.FC<UserCardData> = (userData:UserCardData) => {
    const theme = useTheme();

    const socialLinks = [
        { key: 'githubHome', icon: <GitHubIcon />, url: userData.githubHome },
        { key: 'csdnHome', icon: <CsdnIcon />, url: userData.csdnHome },
        { key: 'giteeHome', icon: <GiteeIcon />, url: userData.giteeHome },
        { key: 'zhihuHome', icon: <ZhihuIcon />, url: userData.zhihuHome },
    ].filter(link => !!link.url);

    return (
        <Card
            sx={{
                maxWidth: 345,
                mx: 'auto',
                mt: { xs: 0, md: 0 },
                position: 'static',
                top: 0,
                width: '100%',
                boxShadow: 3,
                bgcolor: theme.palette.background.paper,
                color: theme.palette.text.primary,
                transition: 'background 0.3s, color 0.3s',
            }}
        >
            <CardContent>
                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <Avatar
                        src={userData.avatar}
                        sx={{ width: 72, height: 72, mb: 2 }}
                    >
                        {!userData.avatar && userData.author?.[0]?.toUpperCase()}
                    </Avatar>
                    <Typography variant="h6" component="div" gutterBottom>
                        {userData.author}
                    </Typography>
                    <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 2 }}>
                        {userData.introduction || '这个人很懒，什么都没有写~'}
                    </Typography>
                    {socialLinks.length > 0 && (
                        <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
                            {socialLinks.map(link => (
                                <IconButton key={link.key} component="a" href={link.url} target="_blank" rel="noopener noreferrer" size="large">
                                    {link.icon}
                                </IconButton>
                            ))}
                        </Box>
                    )}
                </Box>
            </CardContent>
        </Card>
    );
};

export default UserCard;
